<template>
  <!-- 产品荣誉 -->
  <div>
    <div class="honorPc" v-if="$utils.getPc() == 1">
      <time-line @change="$emit('change', $event)" :list="timeList" />
      <div class="list">
        <div class="item" v-for="item in list" :key="item">
          <div class="left">
            <span class="years">{{ item.year }}</span>
            <span class="month" v-if="item.month"
              >{{ item.month }} <span v-if="item.day"> / {{ item.day }} </span>
            </span>
          </div>
          <div class="right">
            <div class="text">
              {{ item.description }}
            </div>
            <img class="img" :src="item.webimages" v-if="item.webimages" />
          </div>
        </div>
      </div>
    </div>

    <!--移动端-->
    <div class="honorM" v-if="$utils.getPc() == 2">
      <div class="honor">
        <div class="angle" v-if="honorStatus == 2">产品荣誉</div>
        <div class="angle-l" v-else>产品荣誉</div>
        <div class="frame-box">
          <div class="yearList-box">
            <el-select
              class="yearList el"
              size="min"
              v-model="year"
              placeholder="请选择"
              @change="$emit('change', year)"
            >
              <el-option
                v-for="item in timeList"
                :key="item.year"
                :label="item.name"
                :value="item.year"
              >
              </el-option>
            </el-select>
          </div>
          <div class="frame">
            <div class="item" v-for="item in list" :key="item">
              <div class="left">
                <span class="years">{{ item.year }}</span>
                <span class="month" v-if="item.month"
                  >{{ item.month }}
                  <span v-if="item.day"> / {{ item.day }} </span>
                </span>
              </div>
              <div class="right">
                <div class="text">
                  {{ item.description }}
                </div>
                <img
                  v-if="item.mobileimages"
                  class="img"
                  :src="item.mobileimages"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timeLine from "../../../components/time-line.vue";
export default {
  components: { timeLine },
  props: {
    list: {
      type: Array,
    },
    honorStatus: Number,
    timeList: Array,
  },
  watch() {
    // timeList:{}
  },
  data() {
    return {
      yearList: [{ year: "", name: "全部" }],
      year: "",
    };
  },
  mounted() {
    this.year = this.timeList?.[0].year;
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .honorM {
    display: none;
  }

  .honorPc {
    position: relative;
    display: flex;
    flex-direction: column;

    .list {
      width: 1200px;
      height: 1000px;
      margin-top: 50px;

      overflow-y: scroll;

      /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
      &::-webkit-scrollbar {
        width: 6px;
        height: 16px;
        background-color: #f5f5f5;
      }

      /*定义滚动条轨道
 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 3px #f5f5f5;
        border-radius: 3px;
        background-color: #f5f5f5;
      }

      /*定义滑块
 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 3px color.$base;
        background-color: color.$base;
      }

      .item {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        padding-left: 80px;
        width: 100%;
        height: 200px;
        display: flex;
        border-bottom: 1px solid #f2f2f2;

        &:hover {
          background-color: #f2f2f2;

          .right {
            margin-left: 60px;
            display: flex;
            align-items: center;

            .text {
              width: 600px;
              font-size: 16px;
             
              font-weight: 400;
              color: color.$base;
              line-height: 30px;
            }

            .img {
              object-fit: fill;
              width: 187px;
              height: 139px;
            }
          }

          .left {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .years {
              font-size: 36px;
             
              font-weight: bold;
              font-style: italic;
              color: color.$base;
            }

            .month {
              font-size: 22px;
             
              font-weight: bold;
              font-style: italic;
              color: color.$base;
            }
          }
        }

        .right {
          margin-left: 60px;
          display: flex;
          align-items: center;

          .text {
            width: 600px;
            font-size: 16px;
           
            font-weight: 400;
            color: #939393;
            line-height: 30px;
          }

          .img {
            object-fit: fill;
            width: 187px;
            height: 139px;
          }
        }

        .left {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .years {
            font-size: 36px;
           
            font-weight: bold;
            font-style: italic;
            color: #939393;
          }

          .month {
            font-size: 22px;
           
            font-weight: bold;
            font-style: italic;
            color: #939393;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .honorPc {
    display: none;
  }

  .honorM {
    position: relative;
    display: flex;
    flex-direction: column;

    .honor {
      margin-top: fn.rpx(40);
      width: 100%;
      display: flex;
      position: relative;
      flex-direction: column;
      position: relative;

      .angle {
        margin-left: fn.rpx(408);
        width: fn.rpx(292);
        height: fn.rpx(75);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../../../assets/image/product/right-bg.png);
        font-size: fn.rpx(26);
       
        font-weight: 400;
        color: #939393;
        display: flex;

        box-sizing: border-box;
        padding-left: fn.rpx(140);
        align-items: center;
      }

      .angle-l {
        width: fn.rpx(292);
        height: fn.rpx(75);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../../../assets/image/product/left-bg.png);
        font-size: fn.rpx(26);
       
        font-weight: 400;
        color: #939393;
        display: flex;

        box-sizing: border-box;
        padding-left: fn.rpx(40);
        align-items: center;
      }

      .frame-box {
        box-sizing: border-box;
        padding: fn.rpx(30) 0;
        background: #fff;
        border-radius: fn.rpx(12) 0 fn.rpx(12) fn.rpx(12);

        .yearList-box {
          display: flex;
          flex-direction: row-reverse;

          ::v-deep .el-input__wrapper {
            height: fn.rpx(50);
          }

          .yearList {
            width: fn.rpx(200);
            margin-right: fn.rpx(30);
          }
        }

        .frame {
          direction: rtl;
          box-sizing: border-box;
          @include fn.scroll;
          overflow-y: scroll;
          padding: 0 fn.rpx(25);
          display: flex;
          flex-direction: column;
          align-items: center;
          height: fn.rpx(400);

          .item {
            direction: ltr;
            margin-top: fn.rpx(20);

            box-sizing: border-box;
            cursor: pointer;
            width: 100%;
            display: flex;
            &:hover {
              .left {
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                .years {
                  font-size: fn.rpx(36);
                 
                  font-weight: bold;
                  font-style: italic;

                  color: color.$base;
                }

                .month {
                  font-size: fn.rpx(22);
                 
                  font-weight: bold;
                  font-style: italic;
                  color: color.$base;
                }
              }

              .right {
                margin-left: fn.rpx(60);
                margin-top: fn.rpx(10);
                display: flex;
                flex-direction: column;

                .text {
                  box-sizing: border-box;
                  width: fn.rpx(500);
                  font-size: fn.rpx(20);
                 
                  font-weight: 400;
                  color: color.$base;
                  line-height: fn.rpx(30);
                }

                .img {
                  margin-top: fn.rpx(10);
                  object-fit: fill;
                  width: fn.rpx(187);
                  height: fn.rpx(139);
                }
              }
            }

            .left {
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .years {
                font-size: fn.rpx(36);
               
                font-weight: bold;
                font-style: italic;

                color: #939393;
              }

              .month {
                font-size: fn.rpx(22);
               
                font-weight: bold;
                font-style: italic;

                color: #939393;
              }
            }

            .right {
              margin-left: fn.rpx(60);
              margin-top: fn.rpx(10);
              display: flex;
              flex-direction: column;

              .text {
                box-sizing: border-box;
                width: fn.rpx(500);
                font-size: fn.rpx(20);
               
                font-weight: 400;
                color: #939393;
                line-height: fn.rpx(30);
              }

              .img {
                margin-top: fn.rpx(10);
                object-fit: fill;
                width: fn.rpx(187);
                height: fn.rpx(139);
              }
            }
          }
        }
      }
    }
  }
}
</style>